<template>
  <div style="background-color:#f0f3f4;width: 100%;height: 100%;margin:0;padding: 0">
    <div class="module" style="float: left;margin-left: 3%">
      <div class="module-title"><span style="color: #757575;font-size: 20px;margin-left: 5%">应收财务</span></div>
      <div class="echarts" id="module1"></div>
    </div>
    <div class="module" style="width:65%;height:125%;float: right;margin-right: 3%">
      <div style="width: 100%;height: 5%;border-bottom: solid 1px #e0e0e0;line-height: 300%;text-align: left;"><span style="color: #757575;font-size: 20px;margin-left: 2%">各省运货量</span></div>
      <div style="width: 93.5%;height: 94%;margin-top: 0.5%">
        <div style="width: 5%;height: 5vh" id="MapImg" @click="list" ></div>
<!--        <div v-show="show" style="width: 30%;height: 94%;border: solid 1px;float:left"></div>-->
        <el-dialog
          title='暂定'
          :visible.sync="show"
          width="30%" height="60vh">a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/></el-dialog>
           <StatisticsMap></StatisticsMap>
      </div>
    </div>
    <div class="module" style="float: left;margin-left: 3%">
      <div class="module-title"><span style="color: #757575;font-size: 20px;margin-left: 5%">客户贡献度排行</span></div>
      <div class="echarts" id="module3" style="margin-left: 1%"></div>
    </div>
    <div class="module" style="width:94%;height:90%;float: left;margin-left: 3%">
      <div style="width: 100%;height: 6.5%;border-bottom: solid 1px #e0e0e0;line-height: 300%;text-align: left;"><span style="color: #757575;font-size: 20px;margin-left: 1.5%">订单调度单变化图</span></div>
      <div style="width: 8%;height: 80%;float: left">
                <el-radio-group v-model="chose" size="medium" @change="changeChose" fill="#209e91">
                  <div style="margin-top: 20%;margin-right: 0%"> <el-radio-button label="近一月" style="width: 50%"></el-radio-button> </div>
                  <div style="margin-top: 20%; margin-right: 0%"><el-radio-button label="近半年" style="width: 50%"> </el-radio-button> </div>
                  <div style="margin-top: 20%;margin-left: 9%"> <el-radio-button label="近一年" style="width: 60%"></el-radio-button></div>
                </el-radio-group>
      </div>
      <div style="width: 86%;height: 95%;float: left;margin-left: -2%" id="module4"></div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import StatisticsMap from "./StatisticsMap";
export default {
  name: "DispatchOrderStatistics",
  data(){
    return{
      changeOfOrderQuantity:'',//订单数量变化数据
      changeOfOrderQuantityXArr:[],//订单数量变化数据横坐标
      changeOfOrderQuantityYArr:[],//订单数量变化数据纵坐标
      changeOfDispatchQuantity:'',//调度单数量变化数据
      changeOfDispatchQuantityYArr:[],//调度单数量变化数据纵坐标
      clientAmountSort:'',//客户贡献数据
      clientAmountSortXArr:[],//客户贡献数据-X
      clientAmountSortYArr:[],//客户贡献数据-Y
      orderFeeData:[],//营业额数量
      incomeData:[],//收入数据
      show:false,
      chose:'近一年',//默认柱状折线图显示近一年
    }
  },
  methods:{
    list(){
      this.show=true;
      this.$axios({
        url: 'order/form/getCityOrderWeight',
        method: 'post',
      }).then(res => {
        if (res.data.success) {
          // for(let i=0;i<res.data.object.length;i++){
          //   let city = res.data.object[i].consignorCity;
          //   if(city != null){
          //     let mapCityInfo = {};
          //     mapCityInfo.name = city.cityName;
          //     mapCityInfo.value =[];
          //     mapCityInfo.value.push(city.longitude);
          //     mapCityInfo.value.push(city.latitude);
          //     mapCityInfo.value.push(res.data.object[i].weight);
          //     mapCityInfo.value.push(res.data.object[i].orderBackupOne);
          //     mapCityInfo.value.push(res.data.object[i].orderFee)
          //     this.mapCityOrderWeightData.push(mapCityInfo)
          //   }
          // }
        }
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
    //渲染运单,调度单变化折线图
    getEmodule4(){
      // 基于准备好的dom，初始化echarts实例
      let module4 = echarts.init(document.getElementById('module4'))
      let color = ['#8fcec8', '#ef8888', '#e8cd5f', '#acc947', '#e8cd5f','#90cfc9','#b9f2a1'];
      module4.showLoading();
      setTimeout(() => {
        module4.setOption({
          color:color,
          //提示框
          tooltip: {
            //axis时显示该列下所有坐标轴所对应的数据
            trigger: 'axis',
            //坐标轴指示器，坐标轴触发有效
            axisPointer: {
              //十字准星
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          //是否显示工具栏组件
          toolbox: {
            feature: {
              //自动采用下标赋值的方式去生成数据视图。
              dataView: { show: true, readOnly: false },
              //图表切换类型
              magicType: { show: true, type: ['line', 'bar'] },
              //还原
              restore: { show: true },
              saveAsImage: { show: true }
            },
            right:'5%',
          },
          legend: {
            data: ['调度单', '订单', '收入']
          },
          xAxis: [
            {
              type: 'category',
              data: this.changeOfOrderQuantityXArr,
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '数量',
              min: 0,
              axisLabel: {
                formatter: '{value} 单'
              }
            },
            {
              type: 'value',
              name: '收入金额',
               min: 0,
              axisLabel: {
                formatter: '{value} 万元'
              }
            }
          ],
          series: [
            {
              name: '订单',
              type: 'bar',
              tooltip: {
                valueFormatter: function (value) {
                  return value + ' 单';
                }
              },
              data: this.changeOfOrderQuantityYArr
            },
            {
              name: '调度单',
              type: 'bar',
              tooltip: {
                valueFormatter: function (value) {
                  return value + ' 单';
                }
              },
              data:this.changeOfDispatchQuantityYArr
            },
            {
              name: '收入',
              type: 'line',
              yAxisIndex: 1,
              tooltip: {
                valueFormatter: function (value) {
                  return value + 'w';
                }
              },
              data: this.orderFeeData
            }
          ]
        });
        module4.hideLoading();
      },500)
      this.getWindowAdjust(module4)
    },
    //获取最近12个月的订单数量变化趋势
    getChangeOfOrderQuantityYear(){
      this.$axios({
        url: 'order/form/getChangeOfOrderQuantityYear',
        method: 'post',
      }).then(res => {
        if (res.data.success) {
          this.changeOfOrderQuantity=res.data.object
          for(let i=0;i<this.changeOfOrderQuantity.length;i++){
            this.changeOfOrderQuantityXArr[i]=this.changeOfOrderQuantity[i].orderBackupOne
            this.changeOfOrderQuantityYArr[i]=this.changeOfOrderQuantity[i].operator
            this.orderFeeData[i]=this.changeOfOrderQuantity[i].orderFee
          }
        }
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
    // 获取最近6个月的订单数量变化趋势
    getChangeOfOrderQuantitySixMonths(){
      this.$axios({
        url: 'order/form/getChangeOfOrderQuantitySixMonths',
        method: 'post',
      }).then(res => {
        if (res.data.success) {
          this.changeOfOrderQuantity=res.data.object
          for(let i=0;i<this.changeOfOrderQuantity.length;i++){
            this.changeOfOrderQuantityXArr[i]=this.changeOfOrderQuantity[i].orderBackupOne
            this.changeOfOrderQuantityYArr[i]=this.changeOfOrderQuantity[i].operator
            this.orderFeeData[i]=this.changeOfOrderQuantity[i].orderFee
          }
        }
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
    // 获取最近1个月的订单数量变化趋势
    getChangeOfOrderQuantityOneMonth(){
      this.$axios({
        url: 'order/form/getChangeOfOrderQuantityOneMonth',
        method: 'post',
      }).then(res => {
        if (res.data.success) {
          this.changeOfOrderQuantity=res.data.object
          for(let i=0;i<this.changeOfOrderQuantity.length;i++){
            this.changeOfOrderQuantityXArr[i]=this.changeOfOrderQuantity[i].orderBackupOne
            this.changeOfOrderQuantityYArr[i]=this.changeOfOrderQuantity[i].operator
            this.orderFeeData[i]=this.changeOfOrderQuantity[i].orderFee
          }
        }
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
    //获取最近6个月的调度数量变化趋势
    getChangeOfDispatchQuantitySixMonths(){
      this.$axios({
        url: 'dispatch/ticket/getChangeOfDispatchQuantitySixMonths',
        method: 'post',
      }).then(res => {
        if (res.data.success) {
          this.changeOfDispatchQuantity=res.data.object
          for(let i=0;i<this.changeOfDispatchQuantity.length;i++){
            this.changeOfDispatchQuantityYArr[i]=this.changeOfDispatchQuantity[i]
          }
        }
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
    //获取最近一年的调度数量变化趋势
    getChangeOfDispatchQuantityYear(){
      this.$axios({
        url: 'dispatch/ticket/getChangeOfDispatchQuantityYear',
        method: 'post',
      }).then(res => {
        if (res.data.success) {
          this.changeOfDispatchQuantity=res.data.object
          for(let i=0;i<this.changeOfDispatchQuantity.length;i++){
            this.changeOfDispatchQuantityYArr[i]=this.changeOfDispatchQuantity[i]
          }
        }
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
    //获取最近30天的调度数量变化趋势
    getChangeOfDispatchQuantityOneMonth(){
      this.$axios({
        url: 'dispatch/ticket/getChangeOfDispatchQuantityOneMonth',
        method: 'post',
      }).then(res => {
        if (res.data.success) {
          this.changeOfDispatchQuantity=res.data.object
          for(let i=0;i<this.changeOfDispatchQuantity.length;i++){
            this.changeOfDispatchQuantityYArr[i]=this.changeOfDispatchQuantity[i]
          }
        }
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
    //客户贡献度排名
    getClientAmountSort(){
      this.$axios({
        url: 'finance/income/getClientAmountSort',
        method: 'post',
      }).then(res => {
        if (res.data.success) {
          this.clientAmountSort=res.data.object
          for(let i=0;i<this.clientAmountSort.length;i++){
            this.clientAmountSortXArr[i]=this.clientAmountSort[i].financeStatement.client
            this.clientAmountSortYArr[i]=this.clientAmountSort[i].financeStatement.total
          }
        }
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
    //渲染客户贡献度柱状图
    getEmodule3(){
      let module3 = echarts.init(document.getElementById('module3'))
      let myColor = ["#62bbb1", "#ef8888", "#6bc4de", "#b1ce4c", "#e8cd5f","#90cfc9"];
      animation:true,  //控制动画示否开启
      module3.showLoading();
      setTimeout(() => {
        module3.setOption({
          grid: {
            top: "0%",
            left: "30%",
            bottom: "10%"
          },
          // 不显示x轴的相关信息
          xAxis: {
            show: false,
          },
          yAxis: [
            {
              type: "category",
              inverse: true,
              data: this.clientAmountSortXArr,
              // 不显示y轴的线
              axisLine: {
                show: false,
              },
              // 不显示刻度
              axisTick: {
                show: false
              },
              // 把刻度标签里面的文字颜色设置为白色
              axisLabel: {
                color:"#aaaa",
                textStyle:{
                  color: '#757575',
                  fontSize:'16'
                },
              }
            },
            {
              //data: this.clientAmountSortYArr,
              inverse: true,
              // 不显示y轴的线
              axisLine: {
                show: false
              },
              // 不显示刻度
              axisTick: {
                show: false
              },
              // 把刻度标签里面的文字颜色设置为白色
              axisLabel: {
                color:"#aaaa"
              }
            }
          ],
          series: [
            {
              name: "条",
              type: "bar",
              data: this.clientAmountSortYArr,
              yAxisIndex: 0,
              // 修改第一组柱子的圆角
              itemStyle: {
                barBorderRadius: 20,
                // 此时的color 可以修改柱子的颜色
                color: function (params) {
                  return myColor[params.dataIndex];
                }
              },
              // 柱子之间的距离
              barCategoryGap: 6,
              //柱子的宽度
              barWidth: 30,
              // 显示柱子内的文字
              label: {
                show: true,
                position: "inside",
                // {c} 会自动的解析为 数据  data里面的数据
                formatter: "{c}w",
                textStyle:{
                  color: '#757575',
                  fontSize:'16'
                }
              }
            }
          ]
        });
        module3.hideLoading();
      },500)
      this.getWindowAdjust(module3)
    },
    //渲染应收财务饼图
    getEmodule1(){
      let module1 = echarts.init(document.getElementById('module1'))
      let color = [ '#5db6ac','#ecd77f','#10c4b5','#6eba8c', '#0e8174',];
      let title = '已收占比';
      module1.showLoading();
      setTimeout(() => {
          module1.setOption({
            color:color,
            //提示框组件，
            tooltip: {
            //触发类型,'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。 'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
              trigger: 'item',
              formatter: function(params){
               return  params.name + ":" + params.value + "w";
              }
            },
            //提示文字
            title: [{
              text: '{name|' + title + '}\n{val|' + (amountReceivable(this.incomeData)/this.total*100).toFixed(2) + '%}',
              top: 'center',
              left: 'center',
              textStyle: {
                rich: {
                  name: {
                    fontSize: 20,
                    fontWeight: 'normal',
                    color: '#666666',
                    padding: [10, 0]
                  },
                  val: {
                    fontSize: 20,
                    fontWeight: 'bold',
                    color: '#666666',
                  }
                }
              }
            },
              //提示标题
              {
                text: '总计:'+this.total.toFixed(2)+'w',
                top: 5,
                right: 20,
                textStyle: {
                  fontSize: 20,
                  color:'#666666',
                  fontWeight: 400
                }
              }
            ],
            series: [{
              type: 'pie',
              radius: ['40%', '80%'],
              center: ['50%', '50%'],
              data: this.incomeData,
              hoverAnimation: false,
              startAngle:180,//起始角度 不设置该值默认为：90
              // minAngle:10,//设定 最小角度
              itemStyle: {
                normal: {
                  borderColor: '#fffff',
                  borderWidth: 0.1
                }
              },
              labelLine: {
                normal: {
                  length: 20,
                  length2: 130,
                  lineStyle: {
                    color: '#bdbdbd'
                  }
                }
              },
              label: {
                normal: {
                  show: false,
                  position: 'left'
                 }
              },
              //强调，重视，选中部分点击时，其他形状”虚化"
              emphasis: {
                label: {
                  show: true,
                  fontSize:'20',

                }
              }
            }]
          });
        module1.hideLoading();
      },500)
      this.getWindowAdjust(module1)
      let amountReceivable=function(objs){
        var r=0;
        for(let i=0;i<objs.length;i++){
          if(objs[i].name=="已收"){
            r=objs[i].value;
          }
        }
        return r;
      };
      let formatNumber = function(num) {
        let reg = /(?=(\B)(\d{3})+$)/g;
        return num.toString().replace(reg, ',');
      }
    },
    //获取应收财务数据
    getEmodule1SetOption() {
      this.$axios({
        url: 'order/form/getIncomeStatus',
        method: 'post',
      }).then(res => {
        if (res.data.success) {
          this.incomeData=res.data.object
          this.total = this.incomeData.reduce((a, b) => {
            return a + b.value * 1
          }, 0);
        }
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
    //窗口自适应方法
    getWindowAdjust(obj){
      window.addEventListener("resize", function() {
        obj.resize();
      });
    },
    changeChose(){
      // console.info(this.chose);
      if(this.chose=='近半年'){
        this.getChangeOfOrderQuantitySixMonths();
        this.getChangeOfDispatchQuantitySixMonths();
        this.getEmodule4();
      }else if(this.chose=='近一月'){
        this.getChangeOfOrderQuantityOneMonth();
        this.getChangeOfDispatchQuantityOneMonth();
        this.getEmodule4();
      }else{
        this.getChangeOfOrderQuantityYear();
        this.getChangeOfDispatchQuantityYear()
        this.getEmodule4();
      }
    }
  },
  mounted() {
    //应收财务饼图
    this.getEmodule1();
    //获取应收财务数据
    this.getEmodule1SetOption();
    //渲染折线图
    this.getEmodule4();
    //折线图-订单数量变化数据
    this.getChangeOfOrderQuantityYear();
    //折线图-调度数量变化数据
    this.getChangeOfDispatchQuantityYear();
    //客户贡献度柱状图
    this.getEmodule3();
    //客户贡献度排行数据
    this.getClientAmountSort();
  },
  components:{
    'StatisticsMap':StatisticsMap
  }
}
</script>

<style scoped>
*{margin: 0px;
  padding:0;}
.module{width:27%;height: 60%;background-color: #ffffff;box-shadow: 10px 10px 5px #c4c6c7;border-radius: 5px;margin-top:2%}
.module-title{width: 100%;height: 10%;border-bottom: solid 1px #e0e0e0;line-height: 300%;text-align: left;}
.echarts{width: 95%;height: 90%;margin-left: -5%}
#MapImg{background: url("../../assets/images/mapImg.png");background-size: 100% 100%}
</style>
